<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin:0;
		padding:0;}
		body{background-color: cornsilk;
		width:1200px;
		margin:0 auto;}
		.a{
		width:100%;
		height:50px;
		background:peachpuff;
		}
		ul{width:100%;
		display:flex;
		justify-content:space-around;
		align-items:center;
		}
		li{float:left; list-style:none; }
		li a{
			display:inline-block;
			text-align:center;
			line-height:50px;
			text-decoration:none;
			color:black;
			font-weight:bold;
		}
		.aa{overflow: hidden; position: relative; width: 100%; }
		.ab{display: flex; transition: transform 0.5s ease-in-out; }
		.ab img{ width:700px; height:300px;
		display: block;
		}
		@keyframes imgk {  
		  0% {  
		    transform: translateX(0);  
		  }  
		  100% {  
		    transform: translateX(-130%); }}
		.ab{animation: imgk 10s linear infinite;}
		.ab:hover{ animation-play-state: paused;}
		a:hover{
			background-color: antiquewhite;
		}
		.b h2{margin:10px;;}
		.ba{ width:1200px; margin-left:12%; } 
		.ba img{width:300px; height:300px;}
		.c{background-color: salmon;;:100%; height: 30px; margin-top:20px;}
		.c h2{text-align:center;}
		</style>
	</head>
	<body>
		<div class="aa">
			<div class="ab">
			<img src="img/4.jpeg">
			<img src="img/3.jpg">
			<img src="img/4.jpg">
			<img src="img/5.jpeg">
			</div>
		</div>
		<div class="a">
			<ul>
				<li><a href="2.html">首页</a></li>
				<li><a href="3.html">人物介绍</a></li>
				<li><a href="4.html">剧情介绍</a></li>
				<li><a href="5.html">图片鉴赏</a></li>
				<li><a href="6.html">影视大全</a></li>
			</ul>
		</div>
		<div class="b">
			<h2>精美图片</h2>
			<div class="ba">
				<img src="img/12315.jpg"">
				<img src="img/123.jpg">
				<img src="img/122.jpg">
				<img src="img/111.jpg">
				<img src="img/11.jpeg">
				<img src="img/1231.jpg">
			</div>
		</div>
		<div class="c">
			<h2>&copy;蜡笔小新</h2>
		</div>
	</body>
</html>